<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://xmlns.jcp.org/jsf/core">
    <ui:composition template="/template.xhtml">
        <ui:define name="title">
            <h:outputText value="#{periodoLabels.Detalles}"></h:outputText>
        </ui:define>
        
        <ui:define name="body">
            <h:form>
                <p:panel header="Detalles de período por tipo de ruta" 
                         style="font-size: small">
                    <h:inputHidden value="#{periodoController.ruta.id}"/>
                    
                    <center>
                        <p:panelGrid columns="2">
                            <p:outputLabel value="Ruta:"/>
                            <p:outputLabel value="#{periodoController.ruta.nombre}"/>
                            
                        </p:panelGrid>
                    </center>
                    <p:separator/>
                    <center>
                        <p:accordionPanel multiple="true">
                            <p:tab title="Períodos Ordinarios">
                                <p:dataTable var="item" value="#{periodoController.periodosOrdinarias}"
                                             emptyMessage="No existen períodos ordinarios"
                                             style="font-size: small; margin-top:20px">
                                    
                                    <f:facet name="header">
                                    Períodos Ordinarios
                                </f:facet>
                                    
                                    <p:column headerText="Nro." style="width: 50px">
                                    <p:outputLabel value="#{item.nro}" />
                                </p:column>
                                <p:column headerText="Vuelta" style="width: 50px">
                                    <p:outputLabel value="#{item.vuelta}" />
                                </p:column>
                                <p:column headerText="Unidad" style="width: 50px">
                                    <p:outputLabel value="#{item.unidad}" />
                                </p:column>
                                <p:column headerText="Hora de Salida" style="width: 150px">
                                    <p:outputLabel value="#{item.horaSalida}" >
                                        <f:convertDateTime pattern="HH:mm" locale="es_EC" timeZone="America/Guayaquil" />
                                    </p:outputLabel>
                                </p:column>
                                <p:column headerText="Hora de Retorno" style="width: 150px">
                                    <p:outputLabel value="#{item.horaLlegada}" >
                                        <f:convertDateTime pattern="HH:mm" locale="es_EC" timeZone="America/Guayaquil" />
                                    </p:outputLabel>
                                </p:column>
                                <p:column headerText="Ciclo" style="width: 150px">
                                    <p:outputLabel value="#{item.ciclo}" >
                                        <f:convertDateTime pattern="HH:mm" locale="es_EC" timeZone="America/Guayaquil" />
                                    </p:outputLabel>
                                </p:column>
                                <p:column headerText="Intervalo" style="width: 150px">
                                    <p:outputLabel value="#{item.intervalo}" >
                                        <f:convertDateTime pattern="HH:mm" locale="es_EC" timeZone="America/Guayaquil" />
                                    </p:outputLabel>
                                </p:column>
                                <p:column headerText="Tiempo en Anden" style="width: 150px">
                                    <p:outputLabel value="#{item.tiempoAnden}" >
                                        <f:convertDateTime pattern="HH:mm" locale="es_EC" timeZone="America/Guayaquil" />
                                    </p:outputLabel>
                                </p:column>
                                    
                                </p:dataTable>
                            </p:tab>
                            
                            <p:tab title="Períodos Sábados">
                                
                                <p:dataTable var="item" value="#{periodoController.periodosSabados}"
                                             emptyMessage="No existen períodos los Sábados"
                                             style="font-size: small; margin-top:20px">
                                    
                                    <f:facet name="header">
                                    Períodos Sábados
                                </f:facet>
                                    
                                    <p:column headerText="Nro." style="width: 50px">
                                    <p:outputLabel value="#{item.nro}" />
                                </p:column>
                                <p:column headerText="Vuelta" style="width: 50px">
                                    <p:outputLabel value="#{item.vuelta}" />
                                </p:column>
                                <p:column headerText="Unidad" style="width: 50px">
                                    <p:outputLabel value="#{item.unidad}" />
                                </p:column>
                                <p:column headerText="Hora de Salida" style="width: 150px">
                                    <p:outputLabel value="#{item.horaSalida}" >
                                        <f:convertDateTime pattern="HH:mm" locale="es_EC" timeZone="America/Guayaquil" />
                                    </p:outputLabel>
                                </p:column>
                                <p:column headerText="Hora de Retorno" style="width: 150px">
                                    <p:outputLabel value="#{item.horaLlegada}" >
                                        <f:convertDateTime pattern="HH:mm" locale="es_EC" timeZone="America/Guayaquil" />
                                    </p:outputLabel>
                                </p:column>
                                <p:column headerText="Ciclo" style="width: 150px">
                                    <p:outputLabel value="#{item.ciclo}" >
                                        <f:convertDateTime pattern="HH:mm" locale="es_EC" timeZone="America/Guayaquil" />
                                    </p:outputLabel>
                                </p:column>
                                <p:column headerText="Intervalo" style="width: 150px">
                                    <p:outputLabel value="#{item.intervalo}" >
                                        <f:convertDateTime pattern="HH:mm" locale="es_EC" timeZone="America/Guayaquil" />
                                    </p:outputLabel>
                                </p:column>
                                <p:column headerText="Tiempo en Anden" style="width: 150px">
                                    <p:outputLabel value="#{item.tiempoAnden}" >
                                        <f:convertDateTime pattern="HH:mm" locale="es_EC" timeZone="America/Guayaquil" />
                                    </p:outputLabel>
                                </p:column>
                                    
                                </p:dataTable>
                                
                            </p:tab>
                            
                            <p:tab title="Períodos Domingos">
                                
                                <p:dataTable var="item" value="#{periodoController.periodosDomingos}"
                                             emptyMessage="No existen períodos los Domingos"
                                             style="font-size: small; margin-top:20px">
                                    
                                    <f:facet name="header">
                                    Períodos Domingos
                                </f:facet>
                                    
                                    <p:column headerText="Nro." style="width: 50px">
                                    <p:outputLabel value="#{item.nro}" />
                                </p:column>
                                <p:column headerText="Vuelta" style="width: 50px">
                                    <p:outputLabel value="#{item.vuelta}" />
                                </p:column>
                                <p:column headerText="Unidad" style="width: 50px">
                                    <p:outputLabel value="#{item.unidad}" />
                                </p:column>
                                <p:column headerText="Hora de Salida" style="width: 150px">
                                    <p:outputLabel value="#{item.horaSalida}" >
                                        <f:convertDateTime pattern="HH:mm" locale="es_EC" timeZone="America/Guayaquil" />
                                    </p:outputLabel>
                                </p:column>
                                <p:column headerText="Hora de Retorno" style="width: 150px">
                                    <p:outputLabel value="#{item.horaLlegada}" >
                                        <f:convertDateTime pattern="HH:mm" locale="es_EC" timeZone="America/Guayaquil" />
                                    </p:outputLabel>
                                </p:column>
                                <p:column headerText="Ciclo" style="width: 150px">
                                    <p:outputLabel value="#{item.ciclo}" >
                                        <f:convertDateTime pattern="HH:mm" locale="es_EC" timeZone="America/Guayaquil" />
                                    </p:outputLabel>
                                </p:column>
                                <p:column headerText="Intervalo" style="width: 150px">
                                    <p:outputLabel value="#{item.intervalo}" >
                                        <f:convertDateTime pattern="HH:mm" locale="es_EC" timeZone="America/Guayaquil" />
                                    </p:outputLabel>
                                </p:column>
                                <p:column headerText="Tiempo en Anden" style="width: 150px">
                                    <p:outputLabel value="#{item.tiempoAnden}" >
                                        <f:convertDateTime pattern="HH:mm" locale="es_EC" timeZone="America/Guayaquil" />
                                    </p:outputLabel>
                                </p:column>
                                    
                                </p:dataTable>
                                
                            </p:tab>
                            
                        </p:accordionPanel>
                    </center>
                    <br />
                    <div align="left" style="font-size: x-small" >
                        <br />
                        <h:link outcome="Index" value="#{despacho.RegresarIndex}"/>
                    </div>   
                </p:panel>
            </h:form>
        </ui:define>
    </ui:composition>
</html>

